<template>
  <view class="blogItem">
    <!-- 弹层 操作菜单 -->
    <u-action-sheet :list="docMenu_data" @click="docMenu_click" v-model="docMenu_state"></u-action-sheet>
    <!-- 文章头部 -->
    <view class="head">
      <view class="userinfo">
        <view class="avatar">
          <image :src="item.user_id[0].avatar_file?item.user_id[0].avatar_file.url:'../../static/image/user.jpg'"
            mode="aspectFill"></image>
        </view>
        <view class="name">
          {{item.user_id[0].nickname?item.user_id[0].nickname:item.user_id[0].username}}
        </view>
        <view class="time">
          <uni-dateformat :date="item.last_modify_date" format="MM月dd hh:mm"
            :threshold="[60000,3600000*24*30]">
          </uni-dateformat>
        </view>
      </view>
      <view class="more" @click="arouse_docMenu">
        <text class="iconfont icon-ellipsis"></text>
      </view>
    </view>
    <!-- 文章中部 -->
    <view class="body">
      <view class="title" @click="goDetail">{{item.title}}</view>
      <view class="text">
        <view class="t" @click="goDetail">{{item.description}}</view>
      </view>
      <view class="piclist">
        <view class="pic" :class="item.picurls.length==1 ? 'only': ''" v-for="(pic,index) in item.picurls" :key="pic">
          <image :src="pic" mode="aspectFill" @click="previewPic(index)"></image>
        </view>
      </view>
    </view>
    <!-- 文章底部 -->
    <view class="info">
      <view class="box">
        <text class="iconfont icon-a-27-liulan"></text> <text>{{item.view_count}}</text>
      </view>
      <view class="box">
        <text class="iconfont icon-a-5-xinxi"></text>
        <text>{{item.comment_count?item.comment_count:'评论'}}</text>
      </view>
      <view class="box" :class="item.isLike?'active':''" @click="clickLike()">
        <text class="iconfont icon-a-106-xihuan"></text>
        <text>{{item.like_count ?item.like_count : '点赞'}}</text>
      </view>
    </view>
    <!-- 连续点赞警告框 -->
    <u-toast ref="uToast" />
  </view>
</template>

<script>
  import {
    ref
  } from "vue"
  import {
    on_like,
    artLike
  } from '../../utils/tools.js'
  const db = uniCloud.database()
  export default {
    name: "blog-item",
    props: {
      item: {
        type: Object,
        default () {
          return {}
        }
      }
    },
    setup(props, {
      emit
    }) {
      const docMenu_data = ref([{
        text: '编辑',
        type: 'edit',
        disabled: true
      }, {
        text: '删除',
        type: 'del',
        color: '#fa3534',
        disabled: true
      }])
      const docMenu_state = ref(false)
      const uToast = ref(null)
      // 点赞
      const clickLike = () => {
        // 点赞防抖
        let res = on_like(uToast)
        if (res) {
          // 前端处理点赞操作
          if (props.item.isLike) {
            props.item.isLike = false
            props.item.like_count--
          } else {
            props.item.isLike = true
            props.item.like_count++
          }
          artLike(props.item._id)
        }
      }
      // 唤起doc_menu
      const arouse_docMenu = () => {
        // 获取用户id
        const uid = uniCloud.getCurrentUserInfo().uid
        // 获取用户权职
        const role = uniCloud.getCurrentUserInfo().role
        if (uid == props.item.user_id[0]._id || role.includes('pyq_administrator') || role.includes('admin')) {
          docMenu_data.value.forEach(item => {
            item.disabled = false
          })
        }
        docMenu_state.value = true
      }
      // 点击图片预览
      const previewPic = (index) => {
        uni.previewImage({
          urls: props.item.picurls,
          current: index
        })
      }
      //点击三个点menu
      const docMenu_click = (e) => {
        if (e) {
          delFun()
        } else {
          editFun()
        }
      }
      // doc_edit 编辑
      const editFun = () => {
        uni.navigateTo({
          url: "/pages/edit/edit?id=" + props.item._id
        })
      }
      // doc_menu 删除
      const delFun = () => {
        uni.showLoading({
          title: "加载中..."
        })
        // 设置状态 物理删除
        db.collection("pyq_article").doc(props.item._id).update({
          delState: true
        }).then(res => {
          // 传递给父组件，删除d对应ata中的数据
          emit("delEvent", props.item._id)
          uni.hideLoading()
          uni.showToast({
            title: "已删除"
          })
        }).catch(err => {
          uni.hideLoading()
        })
      }
      // 点击跳转到详情
      const goDetail = () => {
        uni.navigateTo({
          url: "/pages/detail/detail?id=" + props.item._id
        })
      }
      return {
        previewPic,
        goDetail,
        docMenu_data,
        docMenu_state,
        docMenu_click,
        arouse_docMenu,
        clickLike,
        uToast
      }
    }
  }
</script>

<style lang="scss">
  .blogItem {
    .head {
      display: flex;
      font-size: 32rpx;
      align-items: center;
      justify-content: space-between;

      .userinfo {
        display: flex;
        align-items: center;

        .avatar {
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
          border-radius: 50%;
          overflow: hidden;

          image {
            width: 100%;
            height: 100%;
            display: block;
          }
        }

        .name {
          color: #222;
          padding-left: 10rpx;
        }

        .time {
          color: #888;
          font-size: 22rpx;
          padding-left: 20rpx;
        }
      }

      .more {
        padding: 5rpx;

        .iconfont {
          font-size: 50rpx;
          color: #888;
        }
      }
    }

    .body {
      padding: 15rpx 0 30rpx;

      .title {
        font-size: 44rpx;
        color: #000;
        font-weight: 600;
        text-align: justify;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
      }

      .text {
        padding-top: 10rpx;
        padding-bottom: 10rpx;
        font-size: 30rpx;
        text-align: justify;
        color: #888;

        .t {
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
        }
      }

      .piclist {
        display: flex;
        padding-top: 20rpx;

        .pic {
          width: 225rpx;
          height: 225rpx;
          margin-right: 6rpx;
          overflow: hidden;

          image {
            width: 100%;
            height: 100%;
          }

          &:first-child {
            border-radius: 20rpx 0 0 20rpx;
          }

          &:last-child {
            border-radius: 0 20rpx 20rpx 0;
          }

          &.only {
            border-radius: 20rpx;
          }
        }
      }
    }

    .info {
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-size: 26rpx;
      color: #333;

      .box {
        display: flex;
        align-items: center;
        padding: 15rpx 0 5rpx;
        flex: 1;
        display: flex;
        justify-content: center;

        .iconfont {
          font-size: 40rpx;
          padding-right: 10rpx;
        }
      }

      .active {
        color: #0199FE
      }
    }
  }
</style>